<template>
    <div class="p15">
        <el-form label-width="80px">
            <el-form-item label="员工信息">
                <el-row>
                    <el-col :span="12">
                        <el-tag type="gray">姓名：</el-tag>
                        <el-tag type="success">{{userinfo.name}}</el-tag>
                        <el-tag type="gray" style="margin-left:30px;">电话：</el-tag>
                        <el-tag type="success">{{userinfo.username}}</el-tag>
                        <el-tag type="gray" style="margin-left:30px;">工号</el-tag>
                        <el-tag type="success" v-if="userinfo.worknum">{{userinfo.worknum}}</el-tag>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="查询范围">
                <el-date-picker v-model="riqi" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2" @change="getmsg">
                </el-date-picker>
                <el-button type="primary" @click="outXlsx">导出数据</el-button>
            </el-form-item>
            <el-form-item label="工资组成">
                <el-button type="primary" icon="plus" size="small" @click="openticheng(1)">底薪</el-button>
                <el-button type="primary" icon="plus" size="small" @click="openticheng(2)">提成</el-button>
                <el-button type="primary" icon="plus" size="small" @click="openticheng(3)">指标</el-button>
                <el-button type="primary" icon="plus" size="small" @click="openticheng(4)">奖金</el-button>
                <el-button type="primary" icon="plus" size="small" @click="openticheng(5)">补贴</el-button>
                <el-button type="primary" icon="plus" size="small" @click="openticheng(6)">扣除</el-button>
                <el-table :data="mlist" style="width: 100%" height="500">
                    <el-table-column prop="type" label="组成类型">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type == 1">底薪</el-tag>
                            <el-tag type="gray" v-if="scope.row.type == 2">提成</el-tag>
                            <el-tag type="primary" v-if="scope.row.type == 3">指标</el-tag>
                            <el-tag type="success" v-if="scope.row.type == 4">奖金</el-tag>
                            <el-tag type="warning" v-if="scope.row.type == 5">补贴</el-tag>
                            <el-tag type="danger" v-if="scope.row.type == 6">扣除</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="childtype" label="细类">
                        <template slot-scope="scope">
                            <el-tag type="primary">{{scope.row.childtypename}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="money" label="金额" width="60">
                    </el-table-column>
                    <el-table-column prop="remarks" label="描述">
                    </el-table-column>
                    <el-table-column prop="time" label="工资日期">
                        <template slot-scope="scope">
                            {{time(scope.row.time)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="addtime" label="添加时间">
                        <template slot-scope="scope">
                            {{time(scope.row.addtime)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderid" label="关联订单">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="h-chakan" size="small" @click="chakan(scope.row)" v-if="scope.row.orderid != 0">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button icon="delete2" type="danger" size="small" @click="shanchu(scope.row)" :disabled="0 != scope.row.orderid">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="合计">
                <el-row>
                    <el-col :span="24">
                        底薪 + 提成 + 指标 + 奖金 + 补贴 - 扣除 = {{amount.dixin}} + {{amount.ticheng}} + {{amount.zhibiao}} + {{amount.jiangjin}} + {{amount.butie}} - {{amount.kouchu}} = {{amount.sum}}
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="upload2" @click="onSubmit" v-show="isjs">结算</el-button>
                <el-button type="danger" icon="close" onclick="C.closewin()">取消关闭</el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="添加提成" :visible.sync="tankuang">
            <el-form ref="form" :model="tijiaoform" label-width="70px">
                <el-form-item label="提成类型">
                    <el-select v-model="tijiaoform.type" placeholder="请选择">
                        <el-option label="请选择" :value="0"></el-option>
                        <el-option v-for="(item,index) in selectlist" :label="item.name" :value="item.id" :disabled="item.disabled" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额">
                    <el-input v-model="tijiaoform.money"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="tijiaoform.remarks"></el-input>
                </el-form-item>
                <el-form-item label="业绩时间">
                    <el-col :span="12">
                        <el-date-picker type="date" placeholder="选择日期" v-model="tijiaoform.time" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="tijiao">立即添加</el-button>
                    <el-button @click="tankuang = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- //弹出来的结算工资页面 -->
        <el-dialog title="结算工资" :visible.sync="jiesuankuang">
            <el-form ref="form" :model="jiesuanform" label-width="70px">
                <el-form-item label="支出类别">
                    <el-select v-model="jiesuanform.zhichutype" placeholder="请选择">
                        <el-option label="请选择" :value="0"></el-option>
                        <el-option v-for="(item,index) in zhichuleibie" :label="item.typename" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支出账户">
                    <el-select v-model="jiesuanform.zhanghu" placeholder="请选择">
                        <el-option label="请选择" :value="0"></el-option>
                        <el-option v-for="(item,index) in zhichuzhanghu" :label="item.name" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算月份">
                    <el-date-picker v-model="jiesuanform.month" type="month" placeholder="选择月" @change="getmonthgongzi">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="当月工资">
                    <p style="margin:0px">底薪 + 提成 + 指标 + 奖金 + 补贴 - 扣除 = 总计</p>
                    <p style="margin:0px">{{gongzi.dixin}} + {{gongzi.ticheng}} + {{gongzi.zhibiao}} + {{gongzi.jiangjin}} + {{gongzi.butie}} - {{gongzi.kouchu}} = {{gongzi.sum}}</p>
                </el-form-item>
                <el-form-item label="支出金额">
                    <el-input v-model="jiesuanform.money" disabled></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="jiesuanform.remarks"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="jiesuan">确定结算</el-button>
                    <el-button @click="jiesuankuang = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'

export default {
  name: 'userSalary',
  data () {
    return {
      userinfo: {},
      riqi: C.getDatas().time,
      mlist: [],
      typelist: [
        [{ name: '职称底薪', id: 1 }, { name: '责任底薪', id: 2 }],
        [
          { name: '销售提成', id: 1, disabled: true },
          { name: '手工提成', id: 2, disabled: true },
          { name: '卡耗提成', id: 3, disabled: true },
          { name: '其他提成', id: 4 },
          { name: '现金阶梯', id: 5, disabled: true },
          { name: '卡耗阶梯', id: 6, disabled: true }
        ],
        [{ name: '销售指标', id: 1 }, { name: '卡耗指标', id: 2 }, { name: '手工指标', id: 3 }, { name: '客次指标', id: 4 }, { name: '其他指标', id: 5 }],
        [{ name: '全勤奖金', id: 1 }, { name: '利润奖金', id: 2 }, { name: '其他奖金', id: 3 }],
        [{ name: '工龄补贴', id: 1 }, { name: '社保补贴', id: 2 }, { name: '其他补贴', id: 3 }],
        [{ name: '缺勤扣除', id: 1 }, { name: '请假扣除', id: 2 }, { name: '其他扣除', id: 3 }]
      ],
      selectlist: [],
      tankuang: false,
      jiesuankuang: false,
      tijiaoform: {
        category: 0,
        type: 0,
        money: 0,
        remarks: '',
        userid: C.getDatas().id,
        orderid: 0,
        time: new Date()
      },
      jiesuanform: {
        zhichutype: 0,
        zhanghu: 0,
        money: 0,
        month: new Date(),
        remarks: ''
      },
      zhichuleibie: [],
      zhichuzhanghu: [],
      isjs: true,
      pickerOptions2: {
        shortcuts: [{
          text: '本月',
          onClick (picker) {
            const end = new Date()
            const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      gongzi: {}
    }
  },
  methods: {
    time: function (unix) {
      return C.time(unix)
    },
    onSubmit: function () {
      // 弹出框
      this.getmonthgongzi()
      this.jiesuankuang = true
    },
    jiesuan: async function () {
      C.confirm('确定要结算本月的工资吗？, 是否继续?', async () => {
        if (this.jiesuanform.zhichutype == 0) {
          C.error('请选择支出类型！')
          return false
        }
        if (this.jiesuanform.zhanghu == 0) {
          C.error('请选择支出账户！')
          return false
        }
        if (this.jiesuanform.money <= 0) {
          C.error('支出金额必须大于零！')
          return false
        }
        let data = {
          jiesuan: this.jiesuanform,
          user: this.userinfo
        }
        let res = await C.ajax('/shop/userpay/jiesuangongzi', { data: JSON.stringify(data) }, 'post')
        if (res) {
          C.success(res.data)
          this.jiesuankuang = false
        }
      })
    },
    shanchu: function (row) {
      C.confirm('确定要删除吗？', async () => {
        let data = await C.ajax('/shop/userpay/deleteuserpay', { row: JSON.stringify(row) }, 'post')
        if (data) {
          C.success(data.data)
          this.getmsg()
        }
      })
    },
    gettypename: function (type, childtype) {
      return this.typelist[type - 1][childtype - 1].name
    },
    getmsg: async function () {
      if (!this.riqi) {
        C.error('请选择日期范围！')
        return false
      }
      let data = await C.ajax('/shop/userpay/getpay', { time: JSON.stringify(this.riqi), userid: C.getDatas().id }, 'post')
      if (data) {
        let newdata = []
        data.forEach((row) => {
          newdata.push({
            id: row.id,
            userid: row.userid,
            orderid: row.orderid,
            ordertype: row.ordertype,
            type: row.category,
            childtype: row.type,
            childtypename: this.gettypename(row.category, row.type),
            money: row.money,
            remarks: row.remarks,
            time: row.time,
            addtime: row.addtime
          })
        })
        this.mlist = newdata
      }
    },
    openticheng: function (index) {
      this.tankuang = true
      this.selectlist = this.typelist[index - 1]
      this.tijiaoform.category = index
      this.tijiaoform.type = 0
    },
    tijiao: async function () {
      if (this.tijiaoform.type == 0) {
        C.error('请选择类型！')
        return false
      }

      if (this.tijiaoform.money <= 0) {
        C.error('金额必须大于零！')
        return false
      }

      if (!this.tijiaoform.time) {
        C.error('请选择业绩时间！')
        return false
      }
      let data = await C.ajax('/shop/userpay/insertuserpay', { data: JSON.stringify(this.tijiaoform) }, 'post')
      if (data) {
        C.success(data.data.info)
        this.getmsg()
        this.tankuang = false
      }
    },
    getSummaries: function (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (index === 2) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ' 元'
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    getmonthgongzi: async function () {
      if (!this.jiesuanform.month) {
        C.error('请选择日期范围！')
        return false
      }
      let data = await C.ajax('/shop/userpay/getmonthgongzi', { month: this.jiesuanform.month, userid: C.getDatas().id }, 'post')
      if (data) {
        data.sum = data.dixin + data.ticheng + data.zhibiao + data.jiangjin + data.butie - data.kouchu
        data.sum = data.sum.toFixed(2)
        this.gongzi = data
        this.jiesuanform.money = data.sum
      }
    },
    async chakan (row) {
      await P.showOrderPopup({ id: row.orderid, status: 2, ordertype: row.ordertype })
    },
    async outXlsx () {
      let header = {
        type: {
          value: '组成类型',
          fun: function (val) {
            switch (val) {
              case 1:
                return '底薪'

              case 2:
                return '提成'

              case 3:
                return '指标'

              case 4:
                return '奖金'

              case 5:
                return '补贴'

              case 6:
                return '扣除'
            }
          }
        },
        childtypename: '细类',
        money: '金额',
        remarks: '描述',
        time: {
          value: '工资日期',
          fun: C.time
        },
        addtime: {
          value: '添加时间',
          fun: C.time
        }
      }
      let name = this.userinfo.name + C.time(Math.round(new Date(this.riqi[0]).getTime() / 1000)) + '至' + C.time(Math.round(new Date(this.riqi[1]).getTime() / 1000)) + '工资组成'
      await C.excel(name, header, this.mlist)
    }
  },
  computed: {
    amount: function () {
      let data = {
        dixin: 0,
        ticheng: 0,
        zhibiao: 0,
        jiangjin: 0,
        butie: 0,
        kouchu: 0,
        sum: 0
      }
      this.mlist.forEach((row) => {
        switch (row.type) {
          case 1:
            data.dixin += row.money
            break
          case 2:
            data.ticheng += row.money
            break
          case 3:
            data.zhibiao += row.money
            break
          case 4:
            data.jiangjin += row.money
            break
          case 5:
            data.butie += row.money
            break
          case 6:
            data.kouchu += row.money
            break
        }
      })
      data.sum = data.dixin + data.ticheng + data.zhibiao + data.jiangjin + data.butie - data.kouchu
      data.dixin = data.dixin.toFixed(2)
      data.ticheng = data.ticheng.toFixed(2)
      data.zhibiao = data.zhibiao.toFixed(2)
      data.jiangjin = data.jiangjin.toFixed(2)
      data.butie = data.butie.toFixed(2)
      data.kouchu = data.kouchu.toFixed(2)
      data.sum = data.sum.toFixed(2)
      return data
    }
  },
  mounted: async function () {
    // 获取用户信息
    let res = await C.ajax('/shop/user/userinfo', { id: C.getDatas().id }, 'post')
    if (res) {
      this.userinfo = res
    }
    let data = await C.ajax('/shop/cost/addcost', { type: 2 })
    if (data) {
      this.zhichuleibie = data.cate
      this.zhichuzhanghu = data.acco
    }
    this.getmsg()
  }
}
</script>
<style>
.ov {
    overflow: hidden;
}

.ov-x {
    overflow-x: hidden;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
}

.none {
    display: none;
}

.block {
    display: block;
}

.handel {
    cursor: pointer;
}



/*背景颜色-前景颜色*/

.bg-dark {
    background: #F9FAFC;
}

.bg-extra {
    background: #EFF2F7;
}

.bg-light {
    background: #E5E9F2;
}

.bg-gray {
    background: #D3DCE6;
}

.bg-silver {
    background: #8492A6;
}

.bg-black {
    background: #324057;
}

.white {
    color: white;
}

.black {
    color: #324057;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.color-nan {
    color: #2a91f7;
}

.color-nv {
    color: #f7992a;
}



/*其他样式*/

html {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-weight: 400;
}

.title {
    font-size: 16px;
    font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    line-height: 26px;
    margin: 10px 0;
}

.border {
    border: 1px solid #dfe6ec;
    border-radius: 4px;
    padding: 0 8px;
}

.bd {
    border: 1px solid #dfe6ec;
}

.border-b {
    border-bottom: 1px solid #dfe6ec;
}

.border-t {
    border-top: 1px solid #dfe6ec;
}

.bd-l {
    border-left: 1px dashed #dfe6ec;
}

.bd-t {
    border-top: 1px dashed #dfe6ec;
}

.bd-r {
    border-radius: 50%;
}

.underline {
    text-decoration: underline;
}



/*边距*/

.p0 {
    padding: 0 !important;
}

.m0 {
    margin: 0 !important;
}

.m10 {
    margin: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.ml {
    margin-left: 15px !important;
}

.mr {
    margin-right: 15px !important;
}

.mb {
    margin-bottom: 15px !important;
}

.mt {
    margin-top: 15px !important;
}

.pl {
    padding-left: 15px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pr {
    padding-right: 15px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pb {
    padding-bottom: 15px !important;
}

.pt {
    padding-top: 15px !important;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.w100 {
    width: 100px !important;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w300 {
    width: 300px !important;
}

.w400 {
    width: 400px !important;
}

.w500 {
    width: 500px !important;
}

.w30 {
    width: 30%;
}

.w50 {
    width: 50%;
}

.width95 {
    width: 95%;
}

.width {
    width: 100% !important;
}

.h200 {
    height: 200px;
}

.h300 {
    height: 300px;
}

.h500 {
    height: 500px;
}

.h600 {
    height: 600px;
}

.h700 {
    height: 700px;
}

.h800 {
    height: 800px;
}

.l28 {
    line-height: 28px;
}

.l30 {
    line-height: 30px;
}

.l50 {
    line-height: 50px;
}



/*附加订制样式*/

.el-row {
    margin: 0 !important;
}

.el-table .cell {
    padding: 0;
    text-align: center;
}

.el-textarea__inner {
    resize: none;
}

.el-input.is-disabled .el-input__inner {
    color: #20A0FF;
}

.el-textarea.is-disabled .el-textarea__inner {
    color: #444;
}

.el-switch {
    line-height: 0;
}

.el-checkbox+.el-checkbox {
    margin-left: 0;
}

.el-checkbox {
    margin-right: 20px;
}

.el-autocomplete-suggestion li {
    padding: 4px 20px;
    line-height: 20px;
}

.el-table th {
    padding: 10px 0;
}

.el-table td {
    padding: 4px 0;
}
</style>